<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文字</title>
    <style>
        /*不能在里面设置宽高*/
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<button id="bt">画出贝塞尔曲线</button>
<br>
<br>

</body>

<script>


    const canvas = document.createElement('canvas');
    document.body.append(canvas)
    const ctx = canvas.getContext('2d');
    let width = 600;
    let height = 600;
    canvas.width = width
    canvas.height = height

    ctx.beginPath();
    ctx.lineTo(300, 0);
    ctx.lineTo(300, 600);
    ctx.lineWidth=1
    ctx.stroke()
    ctx.closePath();

    const generateGround = () => {


        ctx.beginPath();
        //加粗700,字体大小30
        ctx.font = '700 30px Arial';
        const linearGradient = ctx.createLinearGradient(10, 0, 60, 0);
        linearGradient.addColorStop(0, 'red')
        linearGradient.addColorStop(0.5, 'green')
        linearGradient.addColorStop(1, 'blue')
        ctx.fillStyle = linearGradient;
        ctx.strokeStyle = linearGradient;
        //这里（x,y）是左下角,之前的都是左上角。文字都是左下角
        // ctx.fillText('test啊', 0, 10);
        // ctx.strokeText('test啊', 10, 100);
        //第四个参数是最大宽度（一般不用）
        ctx.fillText('test啊', 10, 100);
        ctx.fillText('test啊', 10, 150, 50);
        //ltr左到右（不是很重要，自己查文档）
        // ctx.direction='ltr'
        // ctx.textAlign='left'
        ctx.strokeText('test啊', 10, 200);
        ctx.closePath();
    }

    const button = document.getElementById('bt');
    button.addEventListener('click', generateGround);


    const deg2Arc = (deg) => {
        return (deg * Math.PI) / 180;
    }

</script>
</html>